import React, { useState,FC } from 'react';
import { Table, Tag, message, Popconfirm,Button } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { connect,stateType,Dispatch,Loading,useModel } from 'umi';
import './index.less';
import UserModal from './components/UserModal'
import {singleType,formValues} from './data.d';
import ProTable, { TableDropdown } from '@ant-design/pro-table';

interface UserPageType{
  users:stateType,
  dispatch:Dispatch,
  usersLoading:boolean
}
const UserPage:FC<UserPageType> =({ users, dispatch,usersLoading }) =>{
  const [visible, setVisible] = useState(false);
  const [isSuccess, setIsSuccess] = useState(true);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [userInfo, setUserInfo] = useState<singleType | undefined>(undefined);
  const {userName,age} = useModel("userInfo")
  const editHandler = (record:singleType | undefined) => {
    setUserInfo(record)
    setVisible(true)
  }
  const handleCancel = () => {
    setVisible(false)
  }
  const delHandler = (id:number)=>{
    const hide = message.loading('正在删除');
     dispatch({
      type:"users/delUserList",
      payload:{
        id
      },
      callback:(res:string)=>{
        hide()
        if(res === "删除成功"){
          message.success("删除成功")
        }else{
          message.error("没有该用户id")
        }
      }
    })
  }
  const columns = [
    {
      title: '姓名',
      dataIndex: 'userName',
      key: 'userName',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: "操作", dataIndex: "action", key: "action", render: (text: string, record:singleType) => {
        return (
          <>
            <div className="tagCom"><Tag color="green" onClick={() => { editHandler(record) }}>编辑</Tag><Tag color="red"> <Popconfirm onConfirm={()=>{delHandler(record.id)}} title="Are you sure？" icon={<QuestionCircleOutlined style={{ color: 'red' }}/>}>
              <a href="#">删除</a>
            </Popconfirm></Tag></div>
          </>
        )
      }
    }
  ];
  const addHandler = ()=>{
    setUserInfo(undefined);
    setIsSuccess(true)
    setVisible(true)
  }
  
  const onFinish = (values: formValues) => {
    setConfirmLoading(true)
    if(userInfo){
    message.loading({content:'正在更新',key:'edit'});
      dispatch({
        type: "users/editUserList",
        payload: { ...userInfo, ...values },
        callback: (res: string) => {
          message.destroy('edit')
          if (res === '修改数据成功') {
            message.success('修改数据成功')
            setVisible(false)
          } else {
            message.error('修改数据失败')
          }
          setConfirmLoading(false)
        }
      });
    }else{
    const hide = message.loading('正在添加');
      dispatch({
        type:"users/addUserList",
        payload:{
          id:Math.random().toString().slice(2),
          ...values
        },
        callback:(res:string)=>{
          hide()
          if(res === '添加数据成功'){
            message.success(res)
            setVisible(false)
            setIsSuccess(true)
          }else{
            message.error('添加数据失败')
            setIsSuccess(false)
          }
          setConfirmLoading(false)
        }
      })
    }
  };
  return <div className="tableCom">
    hello {userName},今年{age}岁了
    <Button type="primary" onClick={addHandler}>增加</Button>
    <Table dataSource={users.dataSource} columns={columns} rowKey="id" loading={usersLoading}/>
    <UserModal modalVisible={visible} handleCancel={handleCancel} userInfo={userInfo} onFinish={onFinish} isSuccess={isSuccess} confirmLoading={confirmLoading}/>
  </div>
}

const mapStateToProps = ({ users,loading }: { users: stateType,loading:Loading }) => {
  return {
    usersLoading:loading.models.users,
    users
  }
}
export default connect(mapStateToProps)(UserPage as any)